<template>
  <div class="swiper">
    <img :style="{opacity}" :src="data[current].image" alt />
    <ul>
      <li
        @mouseover="current = index"
        :class="{active: current == index}"
        v-for="(item, index) in data.length"
        :key="index"
      ></li>
    </ul>
    <div @click="prev" class="swiper-left-btn"><</div>
    <div @click="next" class="swiper-right-btn">></div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      opacity: 1, // 透明度
      timer: null,
      current: 0,
      // data: [
      //   {
      //     image:
      //       "https://img10.360buyimg.com/pop/s1180x940_jfs/t1/104317/31/14860/54201/5e6a0415Eea5eb271/8311074b2ae7c32e.jpg.webp",
      //     link: "www.baidu.com"
      //   },
      //   {
      //     image:
      //       "https://imgcps.jd.com/ling/10429448896/5a6d5ae_6ZuG5Zui5aSn54mM5pel/5piO5pif55u05pKt6YCB5aW956S8/p-5bd8253082acdd181d02f9f2/46d5ffbc.jpg",
      //     link: "www.jd.com"
      //   },
      //   {
      //     image:
      //       "https://img13.360buyimg.com/pop/s1180x940_jfs/t1/109384/17/5954/84322/5e43d3e8Ee0b3bc40/b6dd66dfb488f62d.jpg.webp",
      //     link: "www.taobao.com"
      //   }
      // ]
    };
  },
  // 组件挂载后启动定时器
  mounted() {
    this.timer = setInterval(this.start, 5000);
  },
  // 组件销毁前销毁定时器
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    start() {
      // 先隐藏
      this.opacity = 0;
      // 延迟显示
      setTimeout(() => {
        // 如果现在是最后一张
        if (this.current === this.data.length - 1) {
          this.current = 0;
        } else {
          this.current++;
        }
        this.opacity = 1;
      }, 200);
    },
    prev() {
      // 如果不是第一个 就向前切换
      if (this.current > 0) {
        this.current--;
      }
    },
    next() {
      // 如果不是最后一个就 切换下一个
      if (this.current < this.data.length - 1) {
        this.current++;
      }
    }
  }
};
</script>

<style lang="scss">
.swiper {
  position: relative;
  overflow: hidden;
  img {
    width: 100%;
    transform: all 1.6s;
  }
  ul {
    position: absolute;
    left: 20px;
    bottom: 20px;
  }
  li {
    display: inline-block;
    margin-right: 10px;
    width: 10px;
    height: 10px;
    opacity: 0.5;
    border-radius: 50%;
    background-color: #fff;
    vertical-align: middle;
    &.active {
      opacity: 1;
      width: 15px;
      height: 15px;
      border: 3px solid #ccc;
    }
  }
  &-left-btn,
  &-right-btn {
    width: 40px;
    height: 40px;
    line-height: 40px;
    top: 50%;
    text-align: center;
    transform: translateY(-50%);
    color: #fff;
    background: #000;
    opacity: 0.2;
    &:hover {
      opacity: 0.8;
      cursor: pointer;
    }
  }
  &-left-btn {
    position: absolute;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
  }
  &-right-btn {
    position: absolute;
    right: 0;
    border-bottom-left-radius: 50%;
    border-top-left-radius: 50%;
  }
}
</style>